<template>
	<view class="apply-information">
		<view class="apply-information-contents">
			<view class="apply-information-list-data">
				<view class="apply-information-data">
					<view class="apply-list">
						<view class="apply-left-text">
							<text>姓名</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入您的姓名" v-model="userName" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>性别</text>
						</view>
						<view class="apply-right-content" @click="sexShow = true">
							<input type="text" disabled placeholder="请选择性别" v-model="userSex" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>年龄</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入您的年龄" v-model="ageNumber" maxlength="2" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>身份证号码</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入您的身份证号码" v-model="idCardNumber" maxlength="18" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>电话号码</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入电话号码" v-model="tel" maxlength="11" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<!-- <view class="apply-list">
						<view class="apply-left-text">
							<text>联系方式</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入您的联系方式" v-model="userPhone" />
							<image src="@/static/right.png" mode=""></image>
						</view>
					</view> -->
					<view class="apply-list">
						<view class="apply-left-text">
							<text>身高</text>
						</view>
						<view class="apply-right-content height-contents">
							<input type="text" placeholder="请输入您的身高" v-model="userHeight" maxlength="3" />
							<text class="height-text">M</text>
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>体重</text>
						</view>
						<view class="apply-right-content height-public">
							<input type="text" placeholder="请输入您的体重" v-model="userWeight" maxlength="3" />
							<text class="kg-text-custom">KG</text>
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>球龄</text>
						</view>
						<view class="apply-right-content">
							<input type="text" placeholder="请输入您的球龄" v-model="userYearNumber" maxlength="2" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="apply-list">
						<view class="apply-left-text">
							<text>档位</text>
						</view>
						<view class="apply-right-content" @click="gearPositionShow = true">
							<input type="text" disabled v-model="gearPosition" placeholder="请选择档位" />
							<!-- <image src="@/static/right.png" mode=""></image> -->
						</view>
					</view>
					<view class="uploading-person-image">
						<view class="person-image-contents">
							<text>上传身份证</text>
							<text>（上传身份证正反面）</text>
						</view>
						<view class="person-uploading" @click="personCodeImage">
							<image :src="s" mode="" v-for="s,k in fileLinkAll" style="margin-right: 10rpx;"></image>
							<image src="@/static/uploadings.png" mode=""></image>
						</view>
					</view>
					<view class="uploading-person-image">
						<view class="person-image-contents">
							<text>上传助教照</text>
							<text>（上传助教照，最大上传9张）</text>
						</view>
						<view class="person-uploading" @click="photoUploading" style="display:flex;flex-wrap: wrap;">
							<image :src="s" mode="" v-for="s,k in photoAllUploading" style="margin-right: 10rpx;">
							</image>
							<image src="@/static/uploadings.png" mode="" style="margin-top:10rpx;"></image>
						</view>
					</view>
					<view class="person-description-information">
						<view class="person-write-input">
							<view class="write-input-text">
								<text>助教简介</text>
								<text>（请填写助教简介）</text>
							</view>
							<view class="write-textarea">
								<textarea v-model="writeTextNumber" name="" id="" cols="30" rows="10"
									placeholder="请介绍一下助教的擅长等"></textarea>
								<view class="text-number">
									<text>{{writeNumber}}</text>
									<text>/200</text>
								</view>
							</view>
						</view>
					</view>
					<view class="person-num-box">
						<view class="person-num">当前已录入{{personNum}}人</view>
					</view>

					<view class="person-submt-button">
						<view class="submit-button">
							<button @click="sureApplay">保存人员信息</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-select value-name="id" label-name="title" :list="gearPositionData" v-model="gearPositionShow"
		@confirm="handleOkLv"></u-select>
	<u-select v-model="sexShow" :list="sexSelectData" @confirm="sureSexChange"></u-select>
</template>

<script lang="ts" setup>
	import {
		postHttpsRequset
	} from '@/public-ts-file/request'
	import { nextTick, ref, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	let gearPositionShow = ref(false)
	let gearPositionData = ref([])
	let gearPosition = ref()

	// 获取档位
	const getLvFn = async () => {
		const parms = {
			path: '/shop/Zhujiao/zhujiaolevel',
			methods: 'post',
		}
		const res = await postHttpsRequset(parms)
		if (res.code == 200) {
			gearPositionData.value = res.data
		}
	}

	// 获取当前已经录入人数
	let personNum = ref(0)
	const getEchoNum = async () => {
		const parms = {
			path: '/shop/Zhujiao/get_zhunum',
			methods: 'post',
		}
		const res = await postHttpsRequset(parms)
		if (res.code == 200) {
			personNum.value = res.data
		}
	}

	const handleOkLv = (e) => gearPosition.value = e[0].value

	onLoad(() => {
		getLvFn()
		getEchoNum()
	})

	const imagePhoto = ref([])
	const photoAllUploading = ref([])
	const photoUploading = () => {
		uni.chooseImage({
			count: 9,
			success: (res) => {
				uni.uploadFile({
					url: 'https://ddzj.hihink.com/api/index/uploadimgs',
					filePath: res.tempFilePaths[0],
					success: (res) => {
						const JsonParse = JSON.parse(res.data)
						if (imagePhoto.value.length < 9) {
							imagePhoto.value.push(JsonParse.data)
							photoAllUploading.value.push(('https://ddzj.hihink.com' + JsonParse.data))
						} else {
							uni.showToast({
								title: '不能超过超过九张',
								icon: 'none'
							})
						}
					}
				})
			}
		})
	}


	const fileLink = ref([])
	const fileLinkAll = ref([])
	const personCodeImage = () => {
		uni.chooseImage({
			count: 2,
			success: (res) => {
				uni.uploadFile({
					url: 'https://ddzj.hihink.com/api/index/uploadimgs',
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						const JsonParea = JSON.parse(res.data)
						if (fileLink.value.length < 2) {
							fileLink.value.push(JsonParea.data)
							fileLinkAll.value.push(('https://ddzj.hihink.com' + JsonParea.data))
						} else {
							uni.showToast({
								title: '不能超过超过两张',
								icon: 'none'
							})
						}
					}
				})
			}
		})
	}


	const sexShow = ref(false)
	const userSex = ref('')
	const sexSelectData = ref([{
		value: 1,
		label: '男'
	}, {
		value: 2,
		label: '女'
	}])

	const sureSexChange = (e) => {
		userSex.value = e[0].label
	}


	const userName = ref()
	const ageNumber = ref()
	const idCardNumber = ref()
	const userPhone = ref()
	const userHeight = ref()
	const userWeight = ref()
	const userYearNumber = ref()
	const writeTextNumber = ref<string>('')
	const writeNumber = ref<number>(0)
	const tel = ref<string>('')
	watch(writeTextNumber, textNumber => {
		writeNumber.value = textNumber.split('').length
	})

	const sureApplay = () => {
		const parms = {
			path: 'shop/Zhujiao/zhujiaoenter',
			methods: 'POST',
			data: {
				z_name: userName.value,
				z_age: ageNumber.value,
				z_idcard: idCardNumber.value,
				z_height: userHeight.value,
				z_weight: userWeight.value,
				z_yeard: userYearNumber.value,
				z_sex: userSex.value == '男' ? 1 : 2,
				z_idcard_img: fileLink.value,
				z_imgs: imagePhoto.value,
				z_introduce: writeTextNumber.value,
				userlevel_id: gearPosition.value,
				tel: tel.value
			}
		}

		// postHttpsRequset(parms).then(async res => {
		// 	uni.showToast({
		// 		title: res.msg,
		// 		icon: 'none'
		// 	})
		// 	if (res.code == 200) {
		// 		uni.navigateTo({
		// 			url: '/pages/index/applay'
		// 		})
		// 	}
		// })
	}
</script>

<style lang="scss" scoped>
	.apply-information {
		.apply-information-contents {
			.apply-information-list-data {
				.apply-information-data {
					.person-num-box {
						display: flex;
						justify-content: center;
						margin-top: 68rpx;

						.person-num {
							opacity: 1;
							/** 文本1 */
							font-size: 10px;
							font-weight: 400;
							letter-spacing: 0px;
							line-height: 13.72px;
							color: rgba(153, 153, 153, 1);
							vertical-align: top;

						}
					}

					.apply-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 30rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #efefef;

						.apply-left-text {
							text {
								font-size: 28rpx;
								color: #333;
							}
						}

						.apply-right-content {
							display: flex;
							align-items: center;

							input {
								text-align: right;
								font-size: 24rpx;

								&::placeholder {
									color: #eaeaea;
								}
							}

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.uploading-person-image {
						margin-top: 40rpx;

						.person-image-contents {
							text {
								font-size: 26rpx;

								&:nth-last-child(1) {
									font-size: 24rpx;
									color: #ccc;
								}
							}
						}

						.person-uploading {
							margin-top: 20rpx;

							image {
								width: 160rpx;
								height: 160rpx;
							}
						}
					}

					.person-description-information {
						.person-write-input {
							margin-top: 40rpx;

							.write-input-text {
								text {
									font-size: 28rpx;
									color: #333;

									&:nth-last-child(1) {
										font-size: 24rpx;
										color: #ccc;
									}
								}
							}

							.write-textarea {
								margin-top: 30rpx;
								width: 100%;
								position: relative;

								textarea {
									border-radius: 10rpx;
									flex: 1;
									width: 97%;
									background: #F0F0F0;
									padding-top: 20rpx;
									padding-left: 20rpx;
									font-size: 28rpx;

									&::placeholder {
										color: #999;
									}
								}

								.text-number {
									position: absolute;
									right: 20rpx;
									bottom: 20rpx;

									text {
										font-size: 26rpx;

										&:nth-last-child(1) {
											color: #999999;
										}
									}
								}
							}
						}
					}

					.person-submt-button {
						margin-top: 60rpx;
						padding-bottom: 60rpx;

						.submit-button {
							button {
								background: #3377FE;
								height: 78rpx;
								border-radius: 1000rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin: 0;
								color: white;
								font-size: 28rpx;

								&::after {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}

	.kg-text-custom {
		font-size: 24rpx;
		color: #999999;
		margin-left: 6rpx;
	}

	.height-public {
		display: flex;
		align-items: center;
	}

	.height-contents {
		display: flex;
		align-items: center;
	}

	.height-text {
		font-size: 26rpx;
		color: #999999;
	}
</style>